<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>老牛会员</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/style.css?100" rel="stylesheet" />
		<script src="../js/flexible.js"></script>
		<script src="../js/flexible_css.js"></script>
		<script src="../js/common.js"></script>
		<style>
			body{
      background-color: #fff;
    }
		#output{
			display: none;
		}
  </style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">老牛会员</h1>
		</header>
		<div class="member">
			<img class="member-back" src="../images/icon_memberback.png" alt="">
			<div class="member-box active" data-type="1">
				<span class="member-type">普通vip</span>
				<span class="member-price">￥99</span>
				<span class="member-date">有效期30天</span>
			</div>
			<div class="member-box" data-type="2">
				<span class="member-type">高级vip</span>
				<span class="member-price">￥199</span>
				<span class="member-date">有效期60天</span>
			</div>
			<div class="member-money">
				<button onclick="pay('wxpay')">确认充值</button>
			</div>
		</div>
		<div id="output">
			Payment模块管理支付功能，可通过js调用第三方支付服务。通过plus.payment可获取支付管理对象。
		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
			mui.init()
			$('.member-box').click(function() {
				$('.member-box').removeClass('active');
				$(this).addClass('active');
			})
			var pays = {};

			function plusReady() {
				// 获取支付通道
				plus.payment.getChannels(function(channels) {
					for (var i in channels) {
						var channel = channels[i];
						pays[channel.id] = channel;
						checkServices(channel);
					}
				}, function(e) {
					outLine('获取支付通道失败：' + e.message);
				});
			}
			document.addEventListener('plusready', plusReady, false);
			// 检测是否安装支付服务
			function checkServices(pc) {
				if (!pc.serviceReady) {
					var txt = null;
					switch (pc.id) {
						case 'alipay':
							txt = '检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
							break;
						default:
							txt = '系统未安装“' + pc.description + '”服务，无法完成支付，是否立即安装？';
							break;
					}
					plus.nativeUI.confirm(txt, function(e) {
						if (e.index == 0) {
							pc.installService();
						}
					}, pc.description);
				}
			}

			var w = null;
			var PAYSERVER = 'http://demo.dcloud.net.cn/payment/?payid=';
			// 支付
			function pay(id) {
				if (w) {
					return;
				} //检查是否请求订单中
				if (id === 'appleiap') {
					outSet('应用内支付');
					clicked('payment_iap.html');
					return;
				}
				outSet('----- 请求支付 -----');
				var url = PAYSERVER;
				if (id == 'alipay' || id == 'wxpay') {
					url += id;
				} else {
					plus.nativeUI.alert('当前环境不支持此支付通道！', null, '捐赠');
					return;
				}
				var appid = plus.runtime.appid;
				if (navigator.userAgent.indexOf('StreamApp') >= 0) {
					appid = 'Stream';
				}
				url += '&appid=' + appid + '&total=';

				w = plus.nativeUI.showWaiting();
				// 请求支付订单
				var paymoney = parseInt($('.member-box.active').attr('data-type'))
				var amount = paymoney === 1 ? 99 : 199;
				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					switch (xhr.readyState) {
						case 4:
							w.close();
							w = null;
							if (xhr.status == 200) {
								outLine('----- 请求订单成功 -----');
								outLine(xhr.responseText);
								var order = xhr.responseText;
								plus.payment.request(pays[id], order, function(result) {
									outLine('----- 支付成功 -----');
									outLine(JSON.stringify(result));
									plus.nativeUI.alert('支付成功：感谢你的支持，我们会继续努力完善产品。', function() {
										back();
									}, '捐赠');
								}, function(e) {
									outLine('----- 支付失败 -----');
									outLine('[' + e.code + ']：' + e.message);
									plus.nativeUI.alert('支付失败');
								});
							} else {
								outLine('----- 请求订单失败 -----');
								outLine(xhr.status);
								plus.nativeUI.alert('获取订单信息失败！', null, '捐赠');
							}
							break;
						default:
							break;
					}
				}
				xhr.open('GET', url + amount);
				outLine('请求支付订单：' + url + amount);
				xhr.send();
			}
		</script>
	</body>

</html>
